<template>
  <div class="box">{{ msg }}</div>
  <span v-html="msg1"></span>
  <span :style="textStyle">哈喽</span>
  <span :href="href">百度</span>
  <button @click="show">显示</button>"
  <!-- 事件修饰符 -->
  <div class="aa" @click="a1">
    <div class="bb" @click.stop="b1"></div>
  </div>
  <a :href="href" @click.prevent="show">百度</a>
</template>
<script>
export default {
  name: 'AboutView',
  data() {
    return {
      msg: 'ahhhhhhhhh',
      msg1: '<h1>99999999</h1>',
      textStyle: {
        color: 'skyblue',
      },
      href: 'https://www.baidu.com',
    }
  },
  methods: {
    show() {
      alert('我来了老弟')
    },
    a1() {
      alert('点击了大的')
      // e.stopPropagation()
    },
    b1() {
      alert('点击了小的')
    },
  },
}
</script>
<style>
.box {
  width: 100px;
  height: 100px;
}
.aa {
  width: 100px;
  height: 100px;
  background-color: rgb(87, 228, 134);
}
.bb {
  width: 50px;
  height: 50px;
  background-color: rgb(73, 116, 236);
}
</style>
